<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div class="p1756447914">
    <u-order-type @chooseDeliveryType="chooseDeliveryTypeTap" :deliveryForm="deliveryForm" ref="orderTypeVue"></u-order-type>

    <u-my-layOut @on-ready="onReadyChange" :showNavbar="false" :navbarOption="{ bgColor: 'rgba(255,255,255,1)', title: '邻事跑腿', border: true }" :color="{ statusBarHeightColor: 'rgba(255,255,255,1)' }">
      <template v-slot:header>
        <div style="height: 1px;background: #EFEFEF;width:100%"></div>
        <div class="fac p1756449038 pl30  jcsb">
          <div class="fac">
            <div class="fz30 mr20" style="font-weight: 500;">接单状态</div>
            <div class="p1756448357">
              <div v-if="service_status" class="fz26 p1756448486">上线中</div>
              <uv-switch @change="updateServiceStatusTap" activeColor="#E60012" v-model="service_status"></uv-switch>
            </div>
          </div>
          <img style="width: 40rpx;height: 40rpx;" @click="orderTypeTap" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0903/4303e202509030903029012.png" alt="">
        </div>
        <div class="p1756451829 bfff">
          <uv-tabs @click="tabClick" :current="current" :scrollable="false" :inactiveStyle="{ color: '#333' }" :activeStyle="{ color: '#9FA0A0' }" lineColor="#E60012" border :list="list"></uv-tabs>
        </div>
      </template>
      <template v-slot:main>
        <div class="h100 oy">
          <div v-for="(item, index) in list" :key="index">
            <u-task :mainHeight="mainHeight" v-if="currentIndex == item.service_status" :ref="'task-' + item.service_status" :userStatus="service_status"></u-task>
          </div>
        </div>
      </template>

      <template v-slot:footer>
        <div style="background: rgba(255,255,255,0);height: 145rpx" class="w100"></div>
        <u-tabbar-list :refreshStatus="refreshStatus" @refresh="refreshStatus = true, _getDeliveryType()" :activeIndex="1"></u-tabbar-list>
      </template>
    </u-my-layOut>

    <uv-popup round="10" closeable ref="taskPopup" mode="center" :closeOnClickOverlay="false">
      <div style="min-height: 120rpx;"></div>
      <div class="" style="margin-top:-90rpx;overflow-y:auto;max-height: 80vh;min-width: 90vw;max-width:90vw;">
        <u-task @taskTypeChange="taskTypeChange" ref="task-0" :taskType="1" @closeTask="closeTaskTap" :userStatus="service_status"></u-task>
      </div>
    </uv-popup>
  </div>
</template>
<script>
import myLayOutVue from './components/layOut.vue'
import orderTypeVue from './components/orderType.vue'
import tabbarVue from './components/tabbar.vue'
import taskVue from './components/task.vue'
import dataJsonMixin from './mixin/dataJson.js'
import payMixin from './mixin/payMixin.js'
import { getOrderStatus, toDoOrderList, updateServiceStatus, getDeliveryType } from '@/api/neighbor.js'

export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-order-type': orderTypeVue, 'u-tabbar-list': tabbarVue, 'u-task': taskVue
  },
  mixins: [dataJsonMixin, payMixin],
  data() {
    return {
      mainHeight: 0,
      current: 0,
      refreshStatus: false,
      tableData: [],
      deliveryForm: {},
      currentIndex: 1,
      info: uni.getSystemInfoSync(),
      service_status: false,
      list: [{
        name: '新任务',
        service_status: 1
      },
      {
        name: '待取货/待服务',
        service_status: 2
      },
      {
        name: '服务中',
        service_status: 3
      },
      {
        name: '已完成',
        service_status: 4
      },
      {
        name: '已取消',
        service_status: 5
      }],
      activeIndex: 0
    }
  },
  onShow() {
    this._getDeliveryType()
  },
  methods: {
    onReadyChange(value) {
      console.log(value)
      this.mainHeight = value.mainHeight
    },
    taskTypeChange(value) {
      if (value == 2) {
        this.current = 0
        this.currentIndex = 1
      } else {
        this.current = 1
        this.currentIndex = 2
      }
      this.tableData = []
      this.$nextTick(() => {
        this.tabClick({ service_status: this.currentIndex })
        this.$refs.taskPopup.close()
      })
    },
    closeTaskTap() {
      this.tableData = []
      this.$refs.taskPopup.close()
      this.tabClick({ service_status: this.currentIndex })
    },
    updateServiceStatusTap(value) {
      uni.showLoading({ title: '加载中', mask: true })
      updateServiceStatus({ service_status: this.service_status ? 1 : 0 }).then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          this.$nextTick(() => {
            uni.$uv.toast(this.service_status ? '上线接单' : '下线休息')
            setTimeout(() => {
              this._initPage()
            }, 500);
          })
          // let data = res.result && res.result.data && JSON.parse(JSON.stringify(res.result.data)).map(item => {
          //   if (item.type == 4 || item.type == 5) {
          //     item.deliveryType = 2
          //   } else {
          //     item.deliveryType = 1
          //   }
          //   return item
          // })
        }
      }).catch(() => {
        uni.hideLoading()
      })
    },
    orderTypeTap() {
      this.$refs.orderTypeVue.openTap()
    },
    extractTime(str) {
      const regex = /\((.*?)\)/;
      const match = str.match(regex);

      return match ? match[1] : null;
    },
    _toDoOrderList() {
      toDoOrderList({}).then(res => {
        if (res.code === 200) {
          if (res.result && res.result.length) {
            let data = res.result && res.result && JSON.parse(JSON.stringify(res.result)).map(item => {
              if (item.desc) item.desc = this.extractTime(item.desc)

              if (item.allocation_time) {
                item.allocationTime = new Date(this.parseIosCompatibleDate(item.allocation_time)).getTime() - new Date().getTime()
              } else {
                item.allocationTime = 70000
              }
              item.deliveryType = item.type == 4 || item.type == 5 ? 2 : 1
              return _initData(item)
            })
            this.tableData = data
            this.$refs.taskPopup.open()
            this.tabClick({ service_status: 0 })
          }
        }
      }).catch(() => {
        uni.hideLoading()
      })
    },
    _getDeliveryType() {
      getDeliveryType().then(res => {
        if (res.code === 200) {
          if (res?.result?.delivery_label?.length) {
            this.deliveryForm = res.result
            this._initPage()
          } else {
            this.$refs.orderTypeVue.openTap()
          }
        }
      })
    },
    _initData(res) {
      let data = JSON.parse(JSON.stringify(res))
      let _d = {
        address: data.delivery_address_address,
        area: data.delivery_address_area,
        city: data.delivery_address_city,
        number: data.delivery_address_number,
        lat: (Number(data.delivery_address_lat) == 0 || Number(data.delivery_address_lat) == NaN) ? '' : data.delivery_address_lat,
        lng: (Number(data.delivery_address_lng) == 0 || Number(data.delivery_address_lng) == NaN) ? '' : data.delivery_address_lng,
        name: data.delivery_address_name,
        province: data.delivery_address_province,
        storey: data.delivery_address_storey,
        tel: data.delivery_address_tel,
        town: data.delivery_address_town
      }
      let _p = {
        address: data.pickup_address_address,
        area: data.pickup_address_area,
        city: data.pickup_address_city,
        number: data.pickup_address_number,
        lat: (Number(data.pickup_address_lat) == 0 || Number(data.pickup_address_lat) == NaN) ? '' : data.pickup_address_lat,
        lng: (Number(data.pickup_address_lng) == 0 || Number(data.pickup_address_lng) == NaN) ? '' : data.pickup_address_lng,
        name: data.pickup_address_name,
        province: data.pickup_address_province,
        storey: data.pickup_address_storey,
        tel: data.pickup_address_tel,
        town: data.pickup_address_town
      }
      let _pur = {
        storey: data.purchase_shop_title,
        address: data.purchase_shop_address,
        lat: (Number(data.purchase_shop_lat) == 0 || Number(data.purchase_shop_lat) == NaN) ? '' : data.purchase_shop_lat,
        lng: (Number(data.purchase_shop_lng) == 0 || Number(data.purchase_shop_lng) == NaN) ? '' : data.purchase_shop_lng,
      }
      data._d = _d
      data._p = _p
      data._pur = _pur
      return data
    },
    chooseDeliveryTypeTap() {
      this._getDeliveryType()
    },
    _initPage() {
      getOrderStatus({}).then(res => {
        if (res.code === 200) {
          if (res.result == 1) {
            this.service_status = true
            this._toDoOrderList()
          }
          this.tabClick({ service_status: this.currentIndex })
        }
      })
    },
    tabClick(value) {
      if (value.service_status != 0) this.currentIndex = value.service_status
      this.$nextTick(() => {
        if (this.$refs['task-' + value.service_status]) {
          if (value.service_status == 0) {
            this.$refs['task-' + value.service_status].tableData = this.tableData.length > 0 ? [this.tableData[0]] : []
          } else {
            this.$refs['task-' + value.service_status][0]._clearAll()
            this.$refs['task-' + value.service_status][0].initPage(value.service_status, 10, (res) => {
              this.refreshStatus = false
            })
          }
        }
      })
    }
  },
}
</script>
<style>
page {
    color: #333;  background-color: #F7F8F8;

}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.p1756438814 {
  width: 30rpx;
  height: 35rpx;
  overflow: hidden;
  position: relative;
  bottom: -4rpx;
}

.p1756448357 {
  position: relative;

  .p1756448486 {
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15rpx;
    z-index: 2;
    line-height: 1.5;
  }
}

.p1756449038 {
  height: 45px;
  background-color: #fff;
  border-bottom: 2rpx solid #efefef;
  box-sizing: border-box;
  padding-right: 30rpx;
}

.p1756451829 {
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.p1756454097 {
  width: 100%;
  min-height: 180rpx;
  height: 180rpx;
  background-color: transparent;
}
</style>